import {
  ModalForm,
  ProFormDatePicker,
  ProFormSelect,
  ProFormText,
} from '@ant-design/pro-components';
import { message } from 'antd';
import * as moment from 'moment';
import { renewalMemberRecord } from '../service';
import { MemberRecordStatus, RenewalType } from '../types.d';
import { useEffect, useState } from 'react';
import { MemberCardTableItem } from '../../MemberCard/types.d';
import { getMemeberCard } from '../../MemberCard/service';
import { mapOptions } from '../../utils';
import { MemberRecordTableItem } from '../types.d';

export default (props: {
  reload: () => void;
  // recordNo: string;
  // cardName: string;
  // cardNo: string;
  // expired: boolean;
  visible: boolean;
  close: () => void;
  currRecord: MemberRecordTableItem;
}) => {
  const { reload, currRecord, visible, close } = props;
  const { recordNo, cardName, cardNo } = currRecord;
  const [currCard, setCurrCard] = useState<MemberCardTableItem | null>(null);
  useEffect(() => {
    if (!cardNo) return;
    getMemeberCard(cardNo).then((res) => {
      if (!res.success) {
        message.error({ key: 'renewal', content: res?.message });
        return;
      }
      setCurrCard(res.data);
    });
  }, [cardNo]);
  return (
    <ModalForm<RenewalType>
      title="续费"
      width="45vw"
      layout="horizontal"
      modalProps={{
        destroyOnClose: true,
        onCancel: () => {
          close();
          setCurrCard(null);
        },
      }}
      initialValues={{
        cardNo,
        cardName,
      }}
      labelCol={{ span: 6 }}
      wrapperCol={{ span: 14 }}
      // trigger={<a>续费</a>}
      visible={visible}
      onFinish={async (values) => {
        const data2create: RenewalType = {
          cardNo: values.cardNo,
          recordNo,
          type: values.type,
        };
        if (values.startTime) {
          data2create.startTime = new Date(moment(values.startTime).format('YYYY-MM-DD 00:00:00'));
        }

        const res = await renewalMemberRecord(data2create);
        if (res.success) {
          message.success({ key: 'renewal', content: res.message });
          close();
          setCurrCard(null);
          reload();
          return true;
        }
        message.error({ key: 'renewal', content: res.message });
        return false;
      }}
    >
      <ProFormText width="lg" name="cardName" label="模板卡名" disabled />
      <ProFormText
        width="lg"
        name="cardNo"
        label="模板卡号"
        placeholder="请填写模板卡号"
        required
        disabled
      />
      {currCard && currCard.typeInfo && (
        <ProFormSelect
          required
          label="续费类型"
          width="lg"
          name="type"
          options={mapOptions(currCard)}
        />
      )}
      {currRecord.status == MemberRecordStatus.expired && (
        <ProFormDatePicker
          width="lg"
          label="开始时间"
          placeholder="请选择开始时间"
          name="startTime"
        />
      )}
      {/* <ProFormSelect
        name="cardNo"
        label="模板卡名"
        debounceTime={300}
        showSearch
        required
        placeholder="请选择模板卡()"
        rules={[{ required: true, message: '请选择模板卡' }]}
        request={(val) => queryMemberCardNames(cardName || val?.keyWords)}
      /> */}
    </ModalForm>
  );
};
